<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Create card</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<script src="js/changeUrlImage.js"></script>
<script src="js/upclick-min.js"></script>

<%if((String)session.getAttribute("username") == null){ %>

	<jsp:forward page="index.jsp"></jsp:forward>
	
<%}%>

<style>
.frame {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
</style>

<script type="text/javascript">
	function upload() {
		var uploadform = document.getElementById('uploadform');
		uploadform.target = 'target-frame';
		uploadform.submit();
	}
</script>

</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#navbar" aria-expanded="false"
				aria-controls="navbar">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">AR BUSINESS CARD</a>
		</div>
		<div id="navbar" class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li class="active"><a href="index.jsp">Home</a></li>
				<!-- <li><a href="#about">About</a></li> -->
				<li><a href="contact.jsp">Contact</a></li>
				<li><a href="create_card.jsp">Create card</a></li>
				<li><a href="#">Download</a></li>


			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li>
					<div class="welcome ">Welcome ${sessionScope.username }</div>
				</li>

			</ul>


		</div>
		<!--/.nav-collapse -->
	</div>
	</nav>
	<form class="form-horizontal" action="nextstep" method="post"
		name="myForm">
		<div class="container bg">

			<div style="margin-top: 35px">


				<div class="row">
					<div class="col-xs-6  col-sm-6 col-md-6  col-lg-6">

						<div class="row">
							<h3>CARD PREVIEW</h3>
						</div>
						<div class="row">
							<div class="btn-group" data-toggle="buttons">
								<label class="btn btn-primary active"> <input
									type="radio" name="options" id="option1" value="card1"
									autocomplete="off" checked
									onChange="changeUrl2('images/cards/card1.png','images/cards/card1_b.png');">
									Card 1
								</label> <label class="btn btn-primary"> <input type="radio"
									name="options" id="option2" value="card2" autocomplete="off"
									onChange="changeUrl2('images/cards/card2.png','images/cards/card2_b.png');">
									Card 2
								</label> <label class="btn btn-primary"> <input type="radio"
									name="options" id="option3" value="card3" autocomplete="off"
									onChange="changeUrl2('images/cards/card3.png','images/cards/card3_b.png')">
									Card 3
								</label> <label class="btn btn-primary"> <input type="radio"
									name="options" id="option3" value="card4" autocomplete="off"
									onChange="changeUrl2('images/cards/card4.png','images/cards/card4_b.png')">
									Card 4
								</label> <label class="btn btn-primary"> <input type="radio"
									name="options" id="option3" value="card5" autocomplete="off"
									onChange="changeUrl2('images/cards/card5.png','images/cards/card5_b.png')">
									Card 5
								</label> <label class="btn btn-primary"> <input type="radio"
									name="options" id="option3" value="card6" autocomplete="off"
									onChange="changeUrl2('images/cards/card6.png','images/cards/card6_b.png')">
									Card 6
								</label> <label class="btn btn-primary"> <input type="radio"
									name="options" id="option3" value="card7" autocomplete="off"
									onChange="changeUrl2('images/cards/card7.png','images/cards/card7_b.png')">
									Card 7
								</label> <label class="btn btn-primary"> <input type="radio"
									name="options" id="option3" value="card8" autocomplete="off"
									onChange="changeUrl2('images/cards/card8.png','images/cards/card8_b.png')">
									Card 8
								</label>

							</div>
						</div>
					</div>

					<div class="col-xs-6  col-sm-6 col-md-6  col-lg-6"></div>

				</div>

				<hr>

				<div class="row">
					<div class="col-xs-6  col-sm-6 col-md-6  col-lg-6">
						<div class="text-middle">
							<h3>Front</h3>
						</div>
						<img src="images/cards/card5.png" class="style_card"
							id="chose_card_img_f">
						<hr>
						<div class="text-middle">
							<h3>Back</h3>
						</div>
						<img src="images/cards/card5_b.png" class="style_card"
							id="chose_card_img_b">



					</div>
					<div class="col-xs-6  col-sm-6 col-md-6  col-lg-6">
						<div class="text-middle" style="margin-right: 14%">
							<h3>Please input your information</h3>
						</div>
						<div class="row">

							<div class="form-group">
								<label
									class="col-xs-2  col-sm-2 col-md-2  col-lg-2 control-label">Fullname:</label>
								<div class="col-xs-6  col-sm-6 col-md-6  col-lg-6">
									<input name="fullname" type="text" class="form-control"
										placeholder="Full name">
								</div>
								<div class="col-xs-4  col-sm-4 col-md-4  col-lg-4">
									<lable name="" value=""> </lable>

								</div>
							</div>
							<div class="form-group">
								<label
									class="col-xs-2  col-sm-2 col-md-2  col-lg-2 control-label">Address:</label>
								<div class="col-xs-6  col-sm-6 col-md-6  col-lg-6">
									<input name="address" type="text" class="form-control"
										placeholder="Address">
								</div>
								<div class="col-xs-4  col-sm-4 col-md-4  col-lg-4">
									<lable> </lable>

								</div>
							</div>
							<div class="form-group">
								<label
									class="col-xs-2  col-sm-2 col-md-2  col-lg-2 control-label">Email:</label>
								<div class="col-xs-6  col-sm-6 col-md-6  col-lg-6">
									<input name="email" type="text" class="form-control"
										placeholder="Email">
								</div>
								<div class="col-xs-4  col-sm-4 col-md-4  col-lg-4">
									<lable> </lable>

								</div>
							</div>

							<div class="form-group">
								<label
									class="col-xs-2  col-sm-2 col-md-2  col-lg-2 control-label">Facebook:</label>
								<div class="col-xs-6  col-sm-6 col-md-6  col-lg-6">
									<input name="facebook" type="text" class="form-control"
										placeholder="Facebook">
								</div>
								<div class="col-xs-4  col-sm-4 col-md-4  col-lg-4">
									<lable> </lable>

								</div>
							</div>
							<div class="form-group">
								<label
									class="col-xs-2  col-sm-2 col-md-2  col-lg-2 control-label">Website:</label>
								<div class="col-xs-6  col-sm-6 col-md-6  col-lg-6">
									<input name="website" type="text" class="form-control"
										placeholder="Website">
								</div>
								<div class="col-xs-4  col-sm-4 col-md-4  col-lg-4">
									<lable> </lable>

								</div>
							</div>
							<div class="form-group">
								<label
									class="col-xs-2  col-sm-2 col-md-2  col-lg-2 control-label">Phone:</label>
								<div class="col-xs-6  col-sm-6 col-md-6  col-lg-6">
									<input name="phone" type="text" class="form-control"
										placeholder="Phone">
								</div>
								<div class="col-xs-4  col-sm-4 col-md-4  col-lg-4">
									<lable> </lable>

								</div>
							</div>
							<div class="form-group">
								<label
									class="col-xs-2  col-sm-2 col-md-2  col-lg-2 control-label">Fax:</label>
								<div class="col-xs-6  col-sm-6 col-md-6  col-lg-6">
									<input name="fax" type="text" class="form-control"
										placeholder="Fax">
								</div>
								<div class="col-xs-4  col-sm-4 col-md-4  col-lg-4">
									<lable> </lable>

								</div>
							</div>

							<div class="form-group">
								<label
									class="col-xs-2  col-sm-2 col-md-2  col-lg-2 control-label">Job:</label>
								<div class="col-xs-6  col-sm-6 col-md-6  col-lg-6">
									<input name="job" type="text" class="form-control"
										placeholder="Job Postition">
								</div>
								<div class="col-xs-4  col-sm-4 col-md-4  col-lg-4">
									<lable> </lable>

								</div>
							</div>
							<div class="form-group">
								<label
									class="col-xs-2  col-sm-2 col-md-2  col-lg-2 control-label">Org.:</label>
								<div class="col-xs-6  col-sm-6 col-md-6  col-lg-6">
									<input name="organization" type="text" class="form-control"
										placeholder="Organization">
								</div>
								<div class="col-xs-4  col-sm-4 col-md-4  col-lg-4">
									<lable> </lable>

								</div>
							</div>
							<div class="form-group">
								<label
									class="col-xs-2  col-sm-2 col-md-2  col-lg-2 control-label">Avatar:</label>
								<div class="col-xs-6  col-sm-6 col-md-6  col-lg-6">
									<input style="height: 38px;" type="file" name="file" onchange="upload()" form="uploadform"/>
								</div>
								<div class="col-xs-4  col-sm-4 col-md-4  col-lg-4">
								</div>
							</div>

							<div class="form-group">
								<label
									class="col-xs-2  col-sm-2 col-md-2  col-lg-2 control-label"></label>
								<div class="col-xs-6  col-sm-6 col-md-6  col-lg-6">
									<input type="submit" name="submit" value="Next"
										class="btn btn-primary right" />
								</div>
								<div class="col-sm-4"></div>
							</div>

						</div>

					</div>

				</div>

				<hr>
			</div>

		</div>
		<!-- /.container -->
		<hr>
	</form>
	
	<form action="uploadservlet" enctype="multipart/form-data" method="post" id="uploadform" name="uploadform"></form>
	<iframe id="target-frame" name="target-frame" class="frame"></iframe>
	
	<footer style="background-color: #123322;min-height:50px">
	<p class="pull-right">
		<a href="#">Back to top</a>
	</p>
	<p>
		© 2014 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a>
	</p>
	</footer>

	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
	<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

